﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>预（决）算清单</title>
    <style>
        * {
            font-size: 14px;
            margin: 0;
            padding: 0;
        }

        .main {
            width: 85%;
            margin: 0 auto;
        }

        table {
            border: 1px solid black;
            border-spacing: 0px;
            /*合并边框*/
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
        }

        h2 {
            text-align: center;
            font-size: 30px;
            padding: 8px 0;
        }

        .add td, .add th {
            border: solid 1px #000000 !important;
        }

        .tHead {
            text-align: center;
            padding-bottom: 8px;
        }
    </style>
</head>

<body>
    <input type="button" onclick="printPage()" value="打印" />
    <div id="print">
        <div class="main">
            <h2>家园装饰工程有限公司工程预（决）算清单</h2>
            <div class="tHead" id="tHead">
                @*                <span>客户名称：</span>
                    <span style="padding-right: 30px;">客户姓名</span>
                    <span>工程地点：</span>
                    <span style="padding-right: 30px;">客户地址</span>
                    <span>建筑面积：</span>
                    <span style="padding-right: 30px;">111.11</span>
                    <span>公司：</span>
                    <span>家园装饰</span> *@
            </div>
            <table class="table table-bordered add" style="font-size: 9px;">
                <tbody>
                    <tr>
                        <td rowspan="2" align="center" valign="middle">编号</td>
                        <td rowspan="2" align="center" valign="middle">材料</td>
                        <td colspan="4" align="center">工程造价</td>
                        <td colspan="5" align="center">单位价值</td>
                        <td rowspan="2" align="center">备 注</td>
                    </tr>
                    <tr id="tTitle">
                        <td align="center">单位</td>
                        <td align="center">数量</td>
                        <td align="center">单价</td>
                        <td align="center">金额</td>
                        <td align="center">主材</td>
                        <td align="center">辅材</td>
                        <td align="center">机械</td>
                        <td align="center">人工</td>
                        <td align="center">损耗</td>
                    </tr>
                    @* <tr>
                            <td colspan="12"><strong>分类名字</strong></td>
                        </tr>
                        <tr>
                            <td align="center">1</td>
                            <td align="center">材料名字</td>
                            <td align="center">单位</td>
                            <td align="center">数量</td>
                            <td align="center">￥单价</td>
                            <td align="center">￥总金额</td>
                            <td align="center">￥主材</td>
                            <td align="center">￥辅材</td>
                            <td align="center">￥机械</td>
                            <td align="center">￥人工</td>
                            <td align="center">￥损耗</td>
                            <td align="left">备注</td>
                        </tr>
                        <tr>
                            <td colspan="12">小计：10000.00元(￥)</td>
                        </tr>
                        <tr>
                            <td colspan="12">
                                <div>
                                    备注：
                                    <p style="padding-left: 30px">
                                        分类备注
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="12"><strong>合计：10000.00元(￥)</strong></td>
                        </tr> *@
                    <tr>
                        <td colspan="8">备注：</td>
                        <td colspan="2">经办人：</td>
                        <td colspan="2">客户签名：</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script src="~/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">

        //订单id
        var orderId = window.location.search.substring(4);

        function printPage() {
            var newstr = document.getElementById("print").innerHTML;
            var oldstr = document.body.innerHTML;
            document.body.innerHTML = newstr;
            window.print();//获得 div 里的所有 html 数据
            document.body.innerHTML = oldstr;
            return false;
        }


        //获取数据
        $.ajax({
            url: '/Order/GetPrintOrderData',
            type: 'get',
            data: {
                orderId
            },
            success: function (res) {
                console.log(res);
                $('#tHead').append(`<span>客户名称：</span>
                                        <span style="padding-right: 30px;">${res.data.customerName}</span>
                                        <span>工程地点：</span>
                                        <span style="padding-right: 30px;">${res.data.customerAddress}</span>
                                        <span>建筑面积：</span>
                                        <span style="padding-right: 30px;">${res.data.area}</span>
                                        <span>公司：</span>
                                        <span>家园装饰</span>`);


                var content = '';



                for (var j = 0; j < res.data.orderMaterials.length; j++) {
                    var classificationItem = res.data.orderMaterials[j];

                    content += `
                        <tr>
                            <td colspan="12"><strong>${classificationItem.classificationTitle}</strong></td>
                        </tr>`; 


                    for (var i = 0; i < classificationItem.list.length; i++) {
                        content += `
                          <tr>
                             <td align="center">${i + 1}</td>
                             <td align="center">${classificationItem.list[i].materialTitle}</td>
                             <td align="center">${classificationItem.list[i].unit}</td>
                             <td align="center">${classificationItem.list[i].num}</td>
                             <td align="center">${classificationItem.list[i].price}</td>
                             <td align="center">${classificationItem.list[i].priceCount}</td>
                             <td align="center">${classificationItem.list[i].priceMain}</td>
                             <td align="center">${classificationItem.list[i].priceAssistant}</td>
                             <td align="center">${classificationItem.list[i].priceMachine}</td>
                             <td align="center">${classificationItem.list[i].priceArtificial}</td>
                             <td align="center">${classificationItem.list[i].priceLoss}</td>
                             <td align="left">${classificationItem.list[i].materialRemark}</td>
                         </tr>`;
                    }

                    content += `
                     <tr>
                         <td colspan="12">小计：${classificationItem.priceCount}元(￥)</td>
                     </tr>
                     <tr>
                         <td colspan="12">
                             <div>
                                 备注：
                                 <p style="padding-left: 30px">
                                     ${classificationItem.classificationRemark}
                                 </p>
                             </div>
                         </td>
                     </tr>`;

                }

                content += `
                    <tr>
                        <td colspan="12"><strong>合计：${res.data.totalPrice}(￥)</strong></td>
                    </tr>`;

                $('#tTitle').after(content);


            }
        });
    </script>
</body>
</html>